<template>
  <el-dialog title="查看详情"
             v-model="visible"
             @close="close"
             width="80%"
             :close-on-click-modal="false"
             class="form">
    <el-descriptions :column="4" border style="width: 100%">
      <template #extra>
        <el-button type="primary" disabled>操作</el-button>
      </template>
      <el-descriptions-item label="订单号"><span v-text="formData.orderSn"/></el-descriptions-item>
      <el-descriptions-item label="店铺名称"><span v-text="formData.shopName"/></el-descriptions-item>
      <el-descriptions-item label="销售人"><span v-text="formData.saleName"/></el-descriptions-item>
      <el-descriptions-item label="操作人"><span v-text="formData.operatorName"/></el-descriptions-item>
      <el-descriptions-item label="订单金额"><span v-text="formData.priceTotal"/></el-descriptions-item>
      <el-descriptions-item label="优惠金额"><span v-text="formData.priceDiscount"/></el-descriptions-item>
      <el-descriptions-item label="结算金额"><span :class="formData.orderStatus === 1 ? 'success':'danger'"
                                                   v-text="formData.priceReal"/></el-descriptions-item>
      <el-descriptions-item label="其他费用"><span v-text="formData.otherAmount"/></el-descriptions-item>
    </el-descriptions>
    <order-goods-list :orderSn="this.info.orderSn" :key="this.info.orderSn"/>
    <el-row style="width: 100%;">
      <el-col :span="12">
        <order-settlement-list :orderId="this.info.orderId" :key="this.info.orderId"/>
      </el-col>
      <el-col :span="12">
      </el-col>
    </el-row>

  </el-dialog>
</template>

<script lang="ts">
import Dic from "@/utils/dic"
import type {FormInstance} from 'element-plus'
import {ref} from "vue";
import orderGoodsList from "@/components/order/orderGoodsList.vue";
import orderSettlementList from "@/components/order/orderSettlementList.vue";

export default {
  name: "orderDetail",
  components: {orderGoodsList, orderSettlementList},
  props: {
    modelValue: {},
    info: {},
    close: {
      required: true,
      type: Function,
    },
    refresh: {
      required: true,
      type: Function,
    }
  },
  setup() {
    const formRef = ref<FormInstance>();
    return {formRef}
  },
  data() {
    return {
      Dic,
      visible: false,
      formData: {},
    };
  },
  watch: {
    modelValue(value) {
      this.visible = value
      if (this.info.orderSn) {
        this.$nextTick(() => {
          this.formData = {...this.info};
        })
      }
      if (this.formRef) {
        this.formRef.resetFields()
      }
    },
  },
  created() {
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.el-dialog__body > *:not(:last-child) {
  margin-bottom: 16px;
}
</style>